<template>
  <div class="components-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="info">
          <div class="btn_wrapper">
            <div class="name">{{ place.placeName }}</div>
            <el-button type="primary" size="mini" @click="dialogVisible = true">添加视频</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <my-video
          v-if="videoFlag"
          :url-options="videos"
          @delete-video="deleteVideo"
        />
      </el-col>
      <el-col :span="8">
        <sensor-data
          v-if="sensorDataFlag"
          :sensor-data="sensorData"
        />
      </el-col>
      <el-col :span="16">
        <panorama
          :panoramas="panoramas"
          :place-id="placeId"
        />
        <my-map
          :coordinate="coordinate"
          @update_coordinate="updateCoordinate"
        />
      </el-col>
      <el-col :span="8">
        <image-upload
          :images="placeImages"
          :params="params"
          :title="title"
          :span="24"
          @delete-image="deleteImage"
          @upload-image-success="uploadImageSuccess"
        />
      </el-col>
    </el-row>
    <el-dialog
      title="添加视频"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="video"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="视频链接" prop="videoUrl">
          <el-input v-model="video.vidoUrl" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVideo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryPlace,
  queryPlaceImage,
  addPlaceImage,
  delPlaceImage,
  queryPlaceLocations,
  modifiyPlaceLocations,
  queryVideo,
  delVideo,
  addVideo
} from '@/api/place'
import { querySensorData } from '@/api/sensorData'
import { queryPanorama } from '@/api/panorama'
import ImageUpload from '@/components/ImageUpload'
import MyVideo from '@/components/MyVideo'
import MyMap from '@/components/MyMap'
import Panorama from '@/components/Panorama'
import SensorData from './components/SensorData'
import store from '@/store'

export default {
  name: 'PlaceImage',
  components: {
    ImageUpload,
    MyVideo,
    MyMap,
    SensorData,
    Panorama
  },
  data() {
    const IMAGE_FILE_NAME = 'placeImage'
    return {
      placeId: null,
      place: {},
      placeImages: [],
      videos: [],
      title: '地块图片',
      coordinate: [],
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME,
      params: {
        account: store.getters.token,
        path: IMAGE_FILE_NAME
      },
      sensorData: [],
      sensorIds: '',
      panoramas: [],
      videoFlag: true,
      rules: {
        videoUrl: [
          {
            type: 'string',
            required: true,
            message: '请填写视频链接',
            trigger: 'trigger'
          }
        ]
      },
      video: {
        vidoName: 'placeVideo',
        vidoUrl: '',
        vidoType: 'video',
        placeId: ''
      },
      dialogVisible: false
    }
  },
  computed: {
    sensorDataFlag() {
      return this.sensorData.length !== 0
    }
  },
  created() {
    this.placeId = Number.parseInt(this.$route.query.placeId)
    this.video.placeId = this.placeId
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.queryPlace()
      this.queryVideo()
      this.queryPlaceImage()

      querySensorData({ placeIds: this.placeId })
        .then(response => {
          this.handleData(response)
        })
        .catch(error => {
          console.log(error)
        })
      queryPlaceLocations({ placeIds: this.placeId })
        .then(response => {
          const coordinate = response.lngLats
          if (coordinate !== '') {
            const arr = coordinate.split('@')
            const lngLat = arr.map(item => {
              const [lng, lat] = item.split(',')
              return [lng, lat]
            })
            this.coordinate = [lngLat]
          }
        })
        .catch(error => {
          console.log(error)
        })

      queryPanorama({
        placeId: this.placeId,
        id: -1
      })
        .then(response => {
          this.panoramas = response.overalls
        })
        .catch(error => {
          console.log(error)
        })
    },
    queryPlace() {
      queryPlace({
        placeId: this.placeId,
        siteId: -1,
        limit: -1,
        pageNumber: 0,
        type: ''
      })
        .then(response => {
          this.place = response.places[0]
          // if (this.place.vidoUrl !== '') {
          //   this.videos = [{
          //     id: this.place.placeId,
          //     value: this.place.vidoUrl
          //   }]
          // } else {
          //   this.videoFlag = false
          // }
        })
        .catch(error => {
          console.log(error)
        })
    },
    async queryPlaceImage() {
      const res = await queryPlaceImage({ placeId: this.placeId })
      const placeImages = res.placeImages // 图片
      this.placeImages = placeImages.map(item => {
        return {
          id: item.imgId,
          url: this.imgUrl + '/' + item.imgUrl,
          visible: false
        }
      })
    },
    async queryVideo() {
      const res = await queryVideo({ placeId: this.placeId })
      const videos = res.videos
      console.log(videos)
      this.videos = videos.map(item => {
        return {
          id: item.id,
          value: item.vidoUrl
        }
      })
      if (videos.length === 0) {
        this.videoFlag = false
      }
    },
    async handleData(sensorData) {
      const newValue = sensorData
      const dataArr = []
      const sensorIds = []
      for (const key in newValue) {
        switch (key) {
          case 'par': {
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].intensity,
              tip: newValue[key].alarmType,
              icon: 'radiation',
              title: '光照辐射'
            })
            sensorIds.push(newValue[key].sensorId)
            break
          }
          case 'rainFall': {
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].rainFall,
              tip: newValue[key].alarmType,
              icon: 'rainfall',
              title: '降雨量'
            })
            sensorIds.push(newValue[key].sensorId)
            break
          }
          case 'radiation': {
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].intensity,
              tip: newValue[key].alarmType,
              icon: 'sunpower',
              title: '光照强度'
            })
            sensorIds.push(newValue[key].sensorId)
            break
          }
          case 'dew': {
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].temp + '℃',
              tip: newValue[key].alarmType,
              icon: 'dew',
              title: '露水温度'
            })
            sensorIds.push(newValue[key].sensorId)
            break
          }
          case 'soil': {
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].temp + '℃',
              tip: newValue[key].alarmType,
              icon: 'soiltemp',
              title: '土壤温度'
            })
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].hum + '%',
              tip: newValue[key].alarmType,
              icon: 'soilhum',
              title: '土壤湿度'
            })
            sensorIds.push(newValue[key].sensorId)
            break
          }
          case 'air': {
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].temp + '℃',
              tip: newValue[key].alarmType,
              icon: 'airtemp',
              title: '空气温度'
            })
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].hum + '%',
              tip: newValue[key].alarmType,
              icon: 'airhum',
              title: '空气湿度'
            })
            sensorIds.push(newValue[key].sensorId)
            break
          }
          case 'wind': {
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].speed,
              tip: newValue[key].alarmType,
              icon: 'windspeed',
              title: '风速'
            })
            dataArr.push({
              sensorId: newValue[key].sensorId,
              data: newValue[key].direction,
              tip: newValue[key].alarmType,
              icon: 'winddirection',
              title: '风向'
            })
            sensorIds.push(newValue[key].sensorId)
            break
          }
        }
      }
      this.sensorData = dataArr
      this.sensorIds = sensorIds.join(',')
      this.getChartData()
    },
    async getChartData() {
      // const res = await getChartData({ sensorIds: this.sensorIds + ',' })
    },
    deleteImage(id) {
      delPlaceImage({ imgId: id })
        .then(response => {
          const index = this.placeImages.findIndex(
            v => v.imgId === id
          )
          this.placeImages.splice(index, 1)
          // this.queryPlaceImage()
          this.$notify({
            title: '提示',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    uploadImageSuccess(image) {
      addPlaceImage({
        placeId: this.placeId,
        imgUrl: image
      })
        .then(response => {
          // this.placeImages.push({
          //   url: this.imgUrl + '/' + image,
          //   visible: false
          // })
          this.queryPlaceImage()
          this.$notify({
            title: '提示',
            message: '上传成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    updateCoordinate(lngLats) {
      modifiyPlaceLocations({
        lngLats,
        placeId: this.placeId
      })
        .then(response => {
          if (response === false) {
            this.$message({
              type: 'warning',
              message: '修改失败!'
            })
          } else {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    reload() {
      console.log(111)
      this.$router.go(0)
    },
    async deleteVideo(videoId) {
      const res = await delVideo({ id: videoId })
      if (res) {
        this.queryVideo()
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
      }
    },
    async addVideo() {
      const res = await addVideo(this.video)
      if (res) {
        this.queryVideo()
        this.$message({
          type: 'success',
          message: '添加成功！'
        })
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style scoped lang="scss">

/* .info {
  font-size: 18px;
  margin:30px 0;
}

.info > div {
  margin-bottom: 15px;
}

.info > .name {
  font-size: 25px;
  font-weight: bolder;
} */

.info {
  margin-bottom: 20px;
  font-size: 18px;
  > div {
    // margin-bottom: 20px;
  }
  .btn_wrapper {
    display:flex;
    align-items: center;
    > .name {
      font-size: 25px;
      font-weight: bolder;
      margin-right: 20px;
    }
  }
}

</style>

